<template>
    <section class="server_register_form_wen_jian_form">
  		<el-form ref="form" :model="wenjianForm" label-width="106px" class="second_form">
    			<el-radio class="first_radio" v-model="wenjianForm.wenjianOrftp" label="1" @change="changeRadio">文件目录</el-radio>
  				<el-radio class="first_radio" v-model="wenjianForm.wenjianOrftp" label="2" @change="changeRadio">FTP</el-radio>
  				
				<el-form-item label="FTP数据源" v-show="chooseRadio==='2'">
					  <el-select v-model="form.inServiceDataSource.connDatasourceId" placeholder="请选择">
					    <el-option
					      v-for="item in FTPData"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id">
					    </el-option>
					  </el-select>
					  <i class="el-icon-circle-plus-outline" style="font-size: 24px;vertical-align: middle;"></i>
				</el-form-item>
				
				<el-form-item label="文件目录">
					    <el-input v-model="form.inServiceDataSource.filePath" placeholder="100字以内"></el-input>
				</el-form-item>
				
				<el-form-item label="文件名称" >
					  <el-input v-model="form.inServiceDataSource.fileName" placeholder="100字以内"></el-input>
					  <el-button type="primary" @click="uploadWenjianName" style="margin-top: 15px;">上传文件</el-button>
					  <input type="file" name="wenjianName_file" id="wenjianName_file" value="" style="display: none;" />
				</el-form-item>
				
				<el-form-item label="数据匹配" ></el-form-item>
				<el-table
					:data="wenjianFormTable1Data"
					style="width: 100%;"
				>
				 		<el-table-column
						       	align="center"
						       	label="列"
						       	>
						      <template slot-scope="scope">
						      	  <span>第{{ Number(scope.$index)+1}}列</span>
						      </template>
						</el-table-column>	
						
						<el-table-column
						       	align="center"
						       	label="中文名"
						       	>
						      <template slot-scope="scope">
						      	<el-input v-model="scope.row.chineseName"></el-input>
						      </template>
						</el-table-column>	
					
						
						<el-table-column
						       	align="center"
						       	label="对应的元数据"
						       	>
						      <template slot-scope="scope">
						      		<el-select v-model="scope.row.yuanData" placeholder="请选择" style="width: 160px;">
									    <el-option
									      v-for="item in wenjianFormYuanDataOptions"
									      :key="item.id"
									      :label="item.name"
									      :value="item.id">
									    </el-option>
									</el-select>
									<i class="el-icon-circle-plus-outline" style="width: 10px;font-size: 18px;"></i>
						      </template>
						</el-table-column>
						
						<el-table-column
						       	align="center"
						       	label=""
						       	style="width: 50px;"
						       	>
							      <template slot-scope="scope" style="width: 50px;">
							      	<span><i class="el-icon-delete"></i></span>
							      </template>
						</el-table-column>
				 </el-table>
				 
				 <el-button type="primary" @click="addWenjianFormTable1Data" style="margin-top: 20px;">添加</el-button>
				 
				 
				 
<!--******************************************************输出*****************************************************************-->
				 
				<el-tabs v-model="activeName2" type="border-card" style="margin-top: 20px;">
				     
				     	
				    <!--**************************************-->
				    <el-tab-pane  name="1">
				    	<span slot="label">
				    		<el-checkbox v-model="checked1"></el-checkbox>
				    		返回接口
				    	</span>
				    	
				    	<el-form-item label="请求参数"></el-form-item>
				    	
						<out-put-table :backJieKouTableData="backJieKouTableData" 
							:wenjianFormTable1Data ="wenjianFormTable1Data"
							:wenjianFormYuanDataOptions="wenjianFormYuanDataOptions"
							:outPutTabletimeOut = "outPutTabletimeOut"
							@outPutTableData="outPutTableData1"
							></out-put-table>
						
						<el-button type="primary" style="margin-top: 20px;" @click="addbackJiekouTableData">增加参数</el-button>
						<el-form-item label="返回数据">
							<el-checkbox-group v-model="wenjianForm.backData">
							     <el-checkbox-button disabled class="box_checkbox" v-for="(item,index) in wenjianFormTable1Data" :label="item.chineseName" :key="item.name">{{item.chineseName}}</el-checkbox-button>
							</el-checkbox-group>
						</el-form-item>
					
				    </el-tab-pane>
				   
				   <!--**************************************-->
				    <el-tab-pane name="2">
				    	<span slot="label">
				    		<el-checkbox v-model="checked2"></el-checkbox>
				    		返回文件
				    	</span>
				    	<el-form-item label="请求参数"></el-form-item>
				    	
						<out-put-table :backJieKouTableData="backWenJianTableData" 
							:wenjianFormTable1Data ="wenjianFormTable1Data"
							:outPutTabletimeOut = "outPutTabletimeOut2"
							@outPutTableData="outPutTableData2"
							:wenjianFormYuanDataOptions="wenjianFormYuanDataOptions">
						</out-put-table>
						
				    	<el-button type="primary" style="margin-top: 20px;" @click="addbackWenJianTableData">增加参数</el-button>
				    	
				    	 <el-form-item label="返回文件地址 ">
							<el-radio-group v-model="wenjianForm.backAdress" @change="changeBackAdress">
							     <el-radio class="box_checkbox" label="1" >通用地址</el-radio>
							     <el-radio class="box_checkbox" label="2" >请求参数指定地址</el-radio>
							</el-radio-group>
							<el-input v-model="wenjianForm.backAdressInput" v-show="backAdress==='1'" placeholder="请输入文件返回的地址,格式:192.10.10.1/documnet/"></el-input>
						  </el-form-item>
				    </el-tab-pane>
				    
				</el-tabs>
    	</el-form>
        
    </section>
</template>

<script>
    import outPutTable from "./outPutTable"
    import {
    	componentGetYuanData2Type,
    	componentGetFTPData
    } from "../../common/js_css_img/serverResourceComputed"
    export default {
    	components:{
    		outPutTable
    	},
    	props:{
    		timeSubmit :Boolean,
    		resourceWeb:Number,
    	},
        data() {
          return {
          		checked1:false,
          		checked2:false,
          		outPutTabletimeOut2:false,
          		outPutTabletimeOut:false,
          		backAdress:"1",
          		activeName2:'1',
          		chooseRadio:1,
          		chooseRadio2:1,
          		wenjianForm:{
          			wenjianName:'',
          			wenjianOrftp:'',
          			name:'',
          			mulu:'',
          			FTPdata:'',
          			backData:[],
          			requestType:[],
          			backAdress:'',
          			backAdressInput:'',
          		},
          		form:{
	          		inServiceDataSource:{  //数据来源
						"type":2 //实时接口类型2;//文件类型3;//数据库类型
						,"connDatasourceId":''   //FTP数据源
						,"filePath":"" //目录
						,"fileName":''//文件名称
						,"outputDataFormList":[ //数据匹配
							
						]
					},
					outServiceDataSourceList:[//返回接口/返回文件
					
				],
          		},
          		FTPData:[
          			{
          				label:'数据源1',
          				value:0,
          			},
          			{
          				label:'数据源2',
          				value:1,
          			}
          		],
          		wenjianFormTable1Data:[/*输入的*/
          		],
          		wenjianFormYuanDataOptions:[/*对应元数据*/
         
          		],
          		backJieKouTableData:[/*返回输出接口的表格*/
          			{
          				canshuName:"",
          				checkRule:'',
          				isHas:'',
          				isCheck:'',
          			}
          		],
          		backWenJianTableData:[/*返回输出文件的表格*/
          			{
          				canshuName:"",
          				checkRule:'',
          				isHas:'',
          				isCheck:'',
          			}
          		],
          		backData:[
          			{
          				label:'姓名',
          				name:'dd'
          			},
          			{
          				label:'性别',
          				name:'2'
          			},
          			{
          				label:'地址',
          				name:'d1d'
          			}
          		],
          };
        },
        methods: {
        	changeBackAdress(val){
        		this.backAdress = val;
        	},
        	changeRadio(val){
        		console.log(val);
        		this.chooseRadio = val;
        		if(val==='2'){
        			componentGetFTPData(this,2,this.resourceWeb);/*ftp数据源*/
        		}
        		
        	},
        	changeRadio2(val){
        		this.chooseRadio2 = val;
        	},
        	uploadWenjianName(){
        		document.getElementById("wenjianName_file").click();
        	},
        	addWenjianFormTable1Data(){
        			this.wenjianFormTable1Data.push(
        				{
          					chineseName:"",
          					yuanData:'',
          				}
        			)
        	},
        	addbackWenJianTableData(){
        		this.backWenJianTableData.push(
        			{
          				canshuName:"",
          				checkRule:'',
          				isHas:'',
          				isCheck:'',
          			}
        		)
        	},
        	addbackJiekouTableData(){
        		this.backJieKouTableData.push(
        			{
          				canshuName:"",
          				checkRule:'',
          				isHas:'',
          				isCheck:'',
          			}
        		)
        	},
        	outPutTableData1(val){/*处理第一个tab*/
        		console.log(val);
        		console.log(this.wenjianFormTable1Data);
        		let  inputDataFormList =[];
        		
        		for (let i in val){
        			inputDataFormList.push(
        				{
        					"key" :val[i].canshuName+1,
        					"name" :  this.wenjianFormTable1Data[val[i].canshuName].chineseName,
        					"metaDataId":this.wenjianFormTable1Data[val[i].canshuName].yuanData,
        					"position" :i+1,
        					"opRule" :val[i].checkRule,
        					"isValid" :val[i].isCheck===""?0:1,
        					"isNecessary" :val[i].isHas===""?0:1,
        				}
        			)
        		}
        		this.form.outServiceDataSourceList.push(
        			{
        				"type":"1", //返回接口2;//返回文件（注意，当数据来源是接口时这个type也要传，传1）
						"filePath" :''
						,"inputDataFormList":inputDataFormList
        			}
        		)
        		console.log(this.form);
//      		this.$emit("outPutForm",this.form);
				this.checkForm();
        	},
        	outPutTableData2(val){/*处理第二个tab*/
        		console.log(val);
        		console.log(this.wenjianFormTable1Data);
        		let  inputDataFormList =[];
        		
        		for (let i in val){
        			inputDataFormList.push(
        				{
        					"key" :val[i].canshuName+1,
        					"name" :  this.wenjianFormTable1Data[val[i].canshuName].chineseName,
        					"metaDataId":this.wenjianFormTable1Data[val[i].canshuName].yuanData,
        					"position" :i+1,
        					"opRule" :val[i].checkRule,
        					"isValid" :val[i].isCheck===""?0:1,
        					"isNecessary" :val[i].isHas===""?0:1,
        				}
        			)
        		}
        		this.form.outServiceDataSourceList.push(
        			{
        				"type":"2", //返回接口2;//返回文件（注意，当数据来源是接口时这个type也要传，传1）
						"filePath" :this.wenjianForm.backAdressInput
						,"inputDataFormList":inputDataFormList
        			}
        		)
        		console.log(this.form);
//      		this.$emit("outPutForm",this.form);
				this.checkForm();
        	},
        	checkForm(){/*校验这个文件表单*/
        		if(this.checked1&&this.checked2&&this.form.outServiceDataSourceList.length==2){
        			this.$emit("outPutForm",this.form);
        		}else if ((this.checked1||this.checked2)&&this.form.outServiceDataSourceList.length==1){
        			this.$emit("outPutForm",this.form);
        		}else{
        			return;
        		}
        	}
        },
        watch:{
        	timeSubmit(newVal){
        		console.log(this.wenjianFormTable1Data);
        		this.form.inServiceDataSource.outputDataFormList=[];
        		for (let i in this.wenjianFormTable1Data){
        			this.form.inServiceDataSource.outputDataFormList.push(
        				{
        					"key":i+1,
        					"name":this.wenjianFormTable1Data[i].chineseName,
        					"metaDataId" :this.wenjianFormTable1Data[i].yuanData,
        				}
        			)
        		}
//      		this.form.outServiceDataSourceList[0].type = this.activeName2;
        		
        		console.log(this.form);
        		
        		if(this.checked1){/*勾选了第一个tab*/
        			this.outPutTabletimeOut=!this.outPutTabletimeOut;
        		}
        		if(this.checked2){/*勾选了第二个*/
        			this.outPutTabletimeOut2=!this.outPutTabletimeOut2;
        		}
        		
//      		this.$emit("outPutForm",this.wenjianForm);
        	}
        },
        mounted(){
        	componentGetYuanData2Type(this,{},2);/*获取共享返回类的元数据*/
        }
  };
</script>

<style>
    .server_register_form_wen_jian_form  .add_button{
    	margin-top: 15px;
    }
	.server_register_form_wen_jian_form .el-table{
		background-color: unset;
	}
	.server_register_form_wen_jian_form .el-table tr{
		background-color: unset;
	}
	.server_register_form_wen_jian_form .el-table thead{
		background-color: #e9eef8;
	}
	.server_register_form_wen_jian_form .first_radio{
		margin-bottom: 20px;
	}
	.server_register_form_wen_jian_form div#tab-first{
		 text-align: right !important;
	     padding-right: 20px !important; 
	     margin-left: unset !important; 
	}
</style>